<template>
	<view class="nav-body">
		<view class="w-box">
			<view class="w-box-title">
				<view class="w-box-title-img">{{_retSlgName(item.Reporter_Name)}}</view>
				<view>
					<view class="w-box-title-header">
						{{item.Reporter_Name}}的月报
					</view>
					<view class="w-box-title-dt">
						{{item.ReportYear}} 年 {{item.ReportMonth}} 月
					</view>
				</view>
				<view class="w-box-more" @click="onClkMore">
					更多
				</view>
			</view>
			<view class="w-box-row">
				<text>本月总结</text>
				<view class="w-box-row-info" v-html="info.Summary"></view>
			</view>
			<view class="w-box-row">
				<text>下月计划</text>
				<view class="w-box-row-info" v-html="info.Plan"></view>
			</view>
		</view>
	</view>
</template>

<script>
	let pageApp = getApp();
	export default {
		data() {
			return {
				info: {},
				item: [],
				id: 0
			}
		},
		onLoad: function(options) {
			this.id = options.id;
			// 准备请求数据
			let apiData = {
				url: pageApp.globalData.url + "/MonthlyReportInfo",
				data: {
					"ID": this.id
				},
				success: (d) => {
					this.item = d.data.data;
					this.info.Summary = this.Base64.unescape(d.data.data.Summary);
					this.info.Plan = this.Base64.unescape(d.data.data.Plan);
				}
			}
			// 发送数据请求
			this.vjAjaxData(apiData);
		},
		methods: {
			_retSlgName(v) {
				return (v) ? v.substr(0, 1) : "";
			},
			onClkMore(e) {
				uni.showActionSheet({
					itemList: ['编辑', '删除'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								uni.navigateTo({
									url: "./MonthlyRepEdit?id=" + this.id
								})
								break;
							case 1:
								uni.showModal({
									title: "微简系统",
									content: "真的要删除对应记录吗？",
									success: (res) => {
										if (res.confirm) {
											// 准备请求数据
											let apiData = {
												url: pageApp.globalData.url + "/MonthlyReportDelete",
												data: {
													"ID": this.id
												},
												method: "POST",
												success: (e) => {
													uni.showToast({
														title: "删除成功！"
													})
													uni.navigateTo({
														url: "./MonthlyRepList"
													})
												}
											}
											// 发送数据请求
											this.vjAjaxData(apiData);
										}
									}
								})
								break;
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #F1F5F6;
	}

	.nav-body {
		background-color: #FFFFFF;
		padding: 0 40rpx
	}

	.w-box {
		padding: 40rpx 0;
		border-bottom: solid 2rpx #F1F5F6;
	}

	.w-box-title {
		position: relative;
		display: flex;
		margin-bottom: 40rpx;
		border: solid 0rpx red;
	}

	.w-box-title-img {
		width: 70rpx;
		height: 70rpx;
		padding: 4rpx;
		text-align: center;
		line-height: 70rpx;
		border-radius: 50%;
		background-color: #4497e1;
		margin-right: 16rpx;
		margin-top: 6rpx;
		color: #ffffff;
		font-size: 34rpx;
		border: solid 0rpx red
	}

	.w-box-title-header {
		font-size: 34rpx;
		font-weight: 700;
	}

	.w-box-title-dt {
		font-size: 26rpx;
		line-height: 30rpx;
	}

	.w-box-more {
		position: absolute;
		top: 16rpx;
		right: 0;
	}

	.w-box-row {
		margin-bottom: 30rpx;
		font-size: 30rpx;
		line-height: 40rpx;
	}

	.w-box-row text {
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
	}
	
	.w-box-row-info {
		width: 680rpx;
		word-wrap: break-word;
	}
</style>
